"use client";
import { useState, useEffect } from 'react';
import Link from 'next/link';
import { webAPI } from '@/lib/api';
import type { Article } from '@/lib/api';

export default function RecommendedArticles() {
  const [list, setList] = useState<Article[]>([]);
  
  useEffect(() => {
    (async () => {
      try {
        const res = await webAPI.getRecommendArticles(6);
        if (res.success) setList(res.data);
      } catch (e) {
        console.error('获取推荐文章失败:', e);
      }
    })();
  }, []);
  
  if (list.length === 0) {
    return <div className="text-sm text-gray-500">暂无推荐文章</div>;
  }
  
  return (
    <div className="space-y-4">
      {list.map(item => (
        <div key={item.id} className="flex items-start gap-3 border-b border-gray-100 pb-3 last:border-b-0">
          {item.coverImage && (
            <img src={item.coverImage} alt={item.title} className="w-12 h-12 object-contain rounded flex-shrink-0 mt-1" />
          )}
          <div className="min-w-0 flex-1">
            <Link href={`/discover/detail/${item.slug}`} className="font-medium !text-black hover:!text-gray-800 line-clamp-2 text-sm leading-tight">
              {item.title}
            </Link>
            {item.summary && (
              <p className="text-xs text-gray-500 mt-1 line-clamp-2 leading-relaxed">
                {item.summary}
              </p>
            )}
            <p className="text-xs text-gray-500 mt-1">{item.author}</p>
          </div>
        </div>
      ))}
    </div>
  );
} 